<template>
	<view class="main">
		<view class="tab_nav">
			<view class="item" :class="{active:active==0}" @click="TabClick(0)">点映订单</view>
			<view class="item" :class="{active:active==1}" @click="TabClick(1)">购票订单</view>
		</view>
		<view class="content" v-if="active==0">
			<view class="item" v-for="(item, i) in list" :key="i" @click="open(item.id)">
				<view class="cover">
					<image :src="item.icoImg" mode=""></image>
				</view>
				<view class="cont">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<view class="des">
							影院：{{item.cinemaName}}
						</view>
						<view class="des">
							影厅：{{item.hallName}}
						</view>
						<view class="des">
							观影时间：{{item.starttime}}
						</view>
						<view class="des">
							影院地址：{{item.cinemaAddress}}
						</view>
						<view class="tag">							
							<u-tag size="mini" v-show="item.status==5" text="未取票" mode="plain" border-color="#EF3F3A" color="#EF3F3A" />
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="content" v-if="active==1">
			<view class="item" @click="open(item.mvOrder.id,item.mvOrder.dianyingId)" v-for="(item,i) in list" :key="i">
				<view class="cover">
					<image :src="item.icoImg" mode=""></image>
				</view>
				<view class="cont">
					<view class="left">
						<view class="title">{{item.mvName}}</view>		
						<view class="des">
							观影影院：{{item.mcName}}
						</view>
						<view class="des">
							观影地址：{{item.cinemaAddress}}
						</view>
						<view class="des">
							影厅：{{item.hallName}}
						</view>
						<view class="des">
							观影时间：{{item.time}}
						</view>
						<view class="des">
							支付金额：{{item.price}}元
						</view>
						<view class="tag">
							<u-tag size="mini" v-show="item.mvOrder.status==2"  text="已支付" mode="plain" border-color="#23B059" color="#23B059" />
							<u-tag size="mini" v-show="item.mvOrder.isQu==1"  text="未取票" mode="plain" border-color="#EF3F3A" color="#EF3F3A" />
						</view>
					</view>
					
				</view>
			</view>
			<!-- <u-modal v-model="show" show-cancel-button content="确认取票？" @confirm="checkIn"></u-modal> -->
		</view>
		<!-- <u-modal v-model="myshow" show-cancel-button content="确认取票？" @cancel="gns" @confirm="checkIn" ></u-modal> -->
		
		<u-modal v-model="show" @confirm="confirm" content="确认取票？" ref="uModal" show-cancel-button :async-close="true"></u-modal>
		<view class="loadmore">
			<u-loadmore :status="status" />
		</view>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show:false,
				active:0,
				status: 'loadmore',
				pageNum:1,//当前页码
				pageSize:10,//每页数量
				total:0,//数据总量
				list:[],//电影列表
				id:{}
			}
		},
		onLoad(e) {
			if(e.type){
			this.active=e.type
			}
		},
		onShow() {
			this.pageNum=1
			this.list=[]
			this.getUserInfo()
		},
		onPullDownRefresh() {
		    this.pageNum=1
		    this.list=[]
		    this.getUserInfo()
		},
		onReachBottom(){
			if(Math.ceil(this.total/this.pageSize)>this.pageNum){
				this.pageNum = this.pageNum+1
				this.getUserInfo()
			}else{
				
			}
		},
		methods: {
			gns(){
				console.log(this.myshow);
				this.show=false
			},
				confirm() {
						this.checkIn()
						setTimeout(() => {
							// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
							this.$refs.uModal.clearLoading();
						}, 3000)
					},
			// 打开取票弹窗
			open(id,mvid){
				if(this.active==0){
					this.id={
						dianyingId:id
					}
				}else{
					this.id={
						orderId:id,
						dianyingId:mvid
					}
				}
				this.show = true
			},
			checkIn(){
				this.$http({
					url:this.$api.collectingTickets,
					method:'GET',
					hideLoading:true,
					data:this.id,
					success:res=>{
						console.log('取票----------',res)
						this.show=false
						uni.redirectTo({
						    url: '/pages/WriteSuccess/index'
						});
					},complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			// 获取用户信息
			getUserInfo(){
						this.userInfo=uni.getStorageSync('userInfo')
						if(!this.userInfo){
							uni.navigateTo({
								url:'../Login/index'
							})
						}else{
						if(this.active==0){
							this.InitiateList(this.userInfo.id)
						}
						if(this.active==1){
							this.MySeeList()
						}
						}
						
				
			},
			// 购票记录
			MySeeList(){
				this.status = 'loading'
				this.$http({
					url:this.$api.getMySee,
					method:'GET',
					hideLoading:true,
					data:{
						status:2,
						isQu:1,
						uid:this.userInfo.id,
						pageNum:this.pageNum,
						pageSize:this.pageSize
					},
					success:res=>{
						if(res.data){
						console.log(res)
						this.total = Number(res.ext)
						if(Math.ceil(this.total/this.pageSize)<=this.pageNum){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
						this.list = this.list.concat(res.data)
						if(this.total==1){							
							this.open(this.list[0].mvOrder.id,this.list[0].mvOrder.dianyingId)
						}else if(this.total>1){
							this.$refs.uToast.show({
							title: '请点击电影列表对应场次，取票！',
							type: 'warning'
						})	
						}
						
						console.log(this.list)
						}
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							this.status = 'nomore'
						}
					}
				})
			},
			//点映列表
			InitiateList(id){
				this.status = 'loading'
				this.$http({
					url:this.$api.getMvDianyingList,
					method:'GET',
					hideLoading:true,
					data:{
						way:1,
						status:5,
						uid:id,
						pageNum:this.pageNum,
						pageSize:this.pageSize
					},
					success:res=>{
						
						if(res.data){							
						this.total = Number(res.ext)
						
						if(Math.ceil(this.total/this.pageSize)<=this.pageNum){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
						
						this.list = this.list.concat(res.data)
											
						if(this.total=='1'){
							this.open(this.list[0].id)
							
						}else if(this.total>1){
							this.$refs.uToast.show({
							title: '请点击电影列表对应场次，取票！',
							type: 'warning'
						})	
						}
						console.log(this.list)
						}
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						this.status = 'nomore'
					}
				})
			},
			
			// 切换列表
			TabClick(e){
				this.active = e
				this.pageNum=1
				this.list=[]
				this.getUserInfo()
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		.tab_nav{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 106rpx;
			border-bottom: 1rpx solid #eeeeee;
			position: sticky;
			left: 0;
			top: 0;
			z-index: 999;
			background-color: #ffffff;
			.item{
				font-size: 28rpx;
				font-weight: 400;
				color: #999990;
				line-height: 40rpx;
				position: relative;
			}
			.active{
				font-weight: 600;
				color: #222222;
			}
			.active::after{
				content: '';
				width: 32rpx;
				height: 6rpx;
				background: #EF3C37;
				border-radius: 3rpx;
				position: absolute;
				left: calc(50% - 16rpx);
				bottom:-8rpx;
			}
		}
		.content{
			padding: 0 30rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 46rpx;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eeeeee;
				.cover{
					width: 152rpx;
					height: 210rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
					
				}
				.cont{
					width: calc(100% - 172rpx);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						width:calc(100% - 10rpx);
						.title{
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
							letter-spacing: 1rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						
						.des{
							
							font-size: 20rpx;
							font-weight: 400;
							color: #44444F;
							line-height: 28rpx;
						}
						.tag{
							margin-top: 14rpx;
							/deep/ .u-tag{
								margin-right: 8rpx;
							}
						}
					}
					.right{
						width: 120rpx;
						height: 48rpx;
						border-radius: 24rpx;
						border: 1rpx solid #EF3C37;
						font-size: 22rpx;
						font-weight: 400;
						color: #EF3C37;
						line-height: 48rpx;
						text-align: center;
					}
				}
			}
		}
		.loadmore{
			margin: 30rpx auto;
		}
	}
</style>
